<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加植物信息</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="css/database.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/recognize.css">
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 设置网页图标 -->
    <link rel="icon" href="images/favicon.gif">
    <link rel="shortcut icon" href="images/favicon.gif">
    <style>
        .edit-container {
            margin-left: 200px;
            margin-top: 200px;
            margin-right: 100px;
        }
        .button2 {
            display: flex;
            align-items: center;
            justify-content: center;
            /* 按钮居中 */
            margin: 20px auto;
            padding: 10px 20px;
            color: white;
            font-size: 15px;
            font-family: "Microsoft YaHei";
            font-weight: 600;
            border-radius: 20px;
            border: 2px solid white;
            letter-spacing: 5px;
            /* 文字居中 */
            text-align: center;
            background-color: transparent;
            transition: background-color 0.5s ease, border-color 0.5s ease;
            margin-left: 20px;
        }
        .row {
            color:white;
            font-family: 'Microsoft YaHei', sans-serif;
            font-size: 20px;
            font-weight: 600;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(146, 88, 173, 0.7);
            padding: 20px;
        }

        span {
            color:white;
            font-family: 'Microsoft YaHei', sans-serif;
            font-size: 20px;
            font-weight: 600;
        }

        #plant-cards .plant-card .edit {
            color:#EB5E66;
            font-family: 'Microsoft YaHei', sans-serif;
            font-size: 15px;
        }

        .input {
            background: transparent;
            margin: 10px;
            padding: 10px;
            border-radius: 50px;
            border: white solid 2px;
        }
    </style>
</head>
<body>
<div class="violet-glow"></div>
<header class="blurry-navbar">
    <div class="navbar-content">
        <h1 class="text-animation text-3xl font-bold">藏药植物药知识平台</h1>
        <nav>
            <ul>
                <li><a href="recognize.html">图片识别</a></li>
                <li><a href="graph.html">知识图谱</a></li>
                <li><a href="database.html">数据库</a></li>
                <li><a href="board.html">数据显示</a></li>
                <li><a href="me.html">个人中心</a></li>
            </ul>
        </nav>
    </div>
</header>
<div class="edit-container">
    <div class="row">
        <div>名称:<input type="text" class="input" id="name" placeholder="修改后的名称"></div>
        <div>分类:<input type="text" class="input" id="category" placeholder="修改后的分类"></div>
        <div>药效指数:<input type="text" class="input" id="score" placeholder="修改后的药效指数"></div>
        <div>分布:<input type="text" class="input" id="distribution" placeholder="修改后的分布"></div>
        <div>描述:<input type="text" class="input" id="description" placeholder="修改后的描述"></div>
        <div>药效:<input type="text" class="input" id="usage" placeholder="修改后的药效"></div>
        <span class="button2">
                <button id="modify" onclick="add()">确认添加</button>
        </span>
        <span class="button2">
                <button id="back" onclick="back()">返回</button>
        </span>
    </div>

</div>

<script>
    function back() {
        location.href = "database.html";
    }
    function add() {
        if($("#name").val() == "" || $("#category").val() == "" || $("#distribution").val() == ""
            || $("#description").val() == "" || $("#usage").val() == "" || $("#score").val() == "") {
            alert("输入数据不能为空!!");
        }
        $.ajax({
            type: "post",
            url: "http://localhost:8083/add",
            data: {
                name: $("#name").val(),
                category: $("#category").val(),
                score: $("#score").val(),
                distribution: $("#distribution").val(),
                description: $("#description").val(),
                usage: $("#usage").val()
            },
            success: function (result) {
                if(result == true) {
                    alert("添加成功!!");
                    $("#name").cleanData();
                    $("#category").cleanData();
                    $("#score").cleanData();
                    $("#distribution").cleanData();
                    $("#description").cleanData();
                    $("#usage").cleanData();
                }
                else{
                    alert("添加失败!!");
                }
            }
        })
    }
</script>

</body>
</html>